<!-- 第一个列表 -->
<template>
    <div class="onelist">
        <h1 class="tit">{{ listData.title }}</h1>
        <ul class="list">
            <li class="list_item" v-for="item in listData.data" :key="item.ItemCode" @click="mpClass(item)">
                <img referrerpolicy="no-referrer" :src="item.img" alt="">
                <!-- <img referrerpolicy="no-referrer" src="https://img01.hua.com/uploadpic/newpic/9012243.jpg_220x240.jpg" alt="恋恋情深"> -->
                <div class="item_com">
                    <div>
                        <div class="com_tit">{{ item.Cpmc }}</div>
                        <div class="com_text">{{ item.Instro }}</div>
                    </div>
                    <div class="com_cat">
                        <div class="cat_price">
                            <p class="price">￥{{ item.Price }}</p>
                            <p class="num">已销售{{ item.Sales }}件</p>
                        </div>
                        <div class="cat_img" @click.stop="addData(item)"><i class="iconfont">&#xe70b;</i></div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="btn">查看更多</div>
    </div>
</template>

<script>
export default {
    name: "onelist",
    props: {
        listData: Object
    },
    methods: {
        addData(data){
            this.$router.push('/CartList')
            this.$store.commit("Addshop", data)
        },
        mpClass(data){
            this.$store.commit("DataClass",data)
            this.$router.push(`/Details`)
        }
    }
}
</script>
<style scoped lang="less">
.onelist {
    margin: 0 .24rem;
    margin-top: .48rem;

}

.tit {
    text-align: center;
    font-size: 0.38rem;
    line-height: 0.52rem;
    font-weight: bold;
    padding: 0 0.24rem;
}

.list {
    margin-top: .2rem;
}

.list_item {
    display: flex;
    margin-bottom: .22rem;
    background: #fff;
    border-radius: .2rem;

    img {
        width: 3.4rem;
        height: 3.72rem;
    }

    ;

    .item_com {
        padding: .32rem;
        display: flex;
        flex-wrap: wrap;

        .com_tit {
            width: 3rem;
            font-weight: 600;
            font-size: 0.3rem;
            line-height: 0.4rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        ;

        .com_text {
            width: 3rem;
            font-size: 0.26rem;
            line-height: 0.36rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        ;

        .com_cat {
            width: 100%;
            align-self: flex-end;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .cat_price {
                .price {
                    font-size: 0.3rem;
                    line-height: 0.48rem;
                    font-weight: bold;
                }

                ;

                .num {
                    font-size: 0.22rem;
                    line-height: 0.32rem;
                    color: #71797f;
                }
            }

            ;

            .cat_img {
                width: .48rem;
                height: .48rem;
                border-radius: 50%;
                background: #ff7d5f;
                position: relative;
                .iconfont {
                    font-size: .48rem;
                    display: block;
                    color: #fff;
                }
            }
        }
    }
}

.btn {
    width: 100%;
    height: .8rem;
    border: none;
    outline: none;
    background: #fff;
    border-radius: .4rem;
    text-align: center;
    line-height: .8rem;
}
</style>